﻿<UserControl  
    x:Class="BootyShaker.HelpPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False">
    <!--SupportedOrientations="Portrait" Orientation="Portrait"-->
<UserControl.Resources>
        <Storyboard x:Name="Hide" Completed="Hide_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="500"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" >
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Show"  Completed="Show_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="500"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" >
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" >
        <Grid.RenderTransform>
            <TranslateTransform/>
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Margin="12,17,0,28">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid x:Name="btnBack" Margin="10,10,10,10" Grid.Column="0" VerticalAlignment="Bottom"  Tap="btnBack_Tap">
                <Image   Stretch="None" Source="/Icons/appbar.back.rest.png"  HorizontalAlignment="Left" />
                <Image   Stretch="None" Source="/BootyShaker;component/Icons/appbar.basecircle.rest.png"  HorizontalAlignment="Left" />
            </Grid>

            <StackPanel Grid.Column="1" x:Name="TitlePanel" Grid.Row="0" >
                <!--<TextBlock Foreground="White" x:Name="ApplicationTitle" Text="BootyShaker" Style="{StaticResource PhoneTextNormalStyle}"/>-->
                <TextBlock x:Name="PageTitle" Text="Help" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="White"/>
            </StackPanel>

        </Grid>
      
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ScrollViewer     ScrollViewer.VerticalScrollBarVisibility="Hidden" Grid.Row="1" Margin="0,0,0,10">
                <StackPanel >
                    <TextBlock   Foreground="White"  HorizontalAlignment="Stretch" Margin="10,10,10,10"   VerticalAlignment="Stretch" TextTrimming="None" TextWrapping="Wrap">
Congratulations! You now possess the sexiest app around - BootyShaker. 
Get started by creating a project using a picture from your picture gallery, or capturing a photo with your camera.
Once you have created and saved some projects, you can always find them in the "Load project" section in the start page. 
                        To delete any project tap and hold on its icon until a context menu pops up.
                    </TextBlock>
                    <TextBlock   Foreground="White"  HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" TextTrimming="None" TextWrapping="Wrap">
After opening a project or creating a new one you are taken to the designer window. 
There you'll have to create and position shake objects on the portions of images you want to jiggly-wobbly:) 
You can rotate, resize and move the image any direction. 
Now lets see the application bar.
                    </TextBlock>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Grid.Row="0" Source="/BootyShaker;component/Help/reset.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Left" />
                        <TextBlock  Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            Resets the image and removes all shake objects. Use it whenever you feel you messed up too much :)
                        </TextBlock>


                        <Image Grid.Column="0" Grid.Row="1"  Source="/BootyShaker;component/Help/add.png" Stretch="None"/>
                        <TextBlock   Foreground="White" Grid.Column="1" Grid.Row="1"  HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" TextTrimming="None" TextWrapping="Wrap">
           Adds a new shake object to the designer. Once you add an object you can resize and move it by pinching and dragging.
           You can also add shake objects by double-tapping anywhere on the design area.
                        </TextBlock>


                        <Image Grid.Column="0" Grid.Row="2"  Source="/BootyShaker;component/Help/play.png"  Stretch="None"/>
                        <TextBlock  Foreground="White" Grid.Column="1" Grid.Row="2"   HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" TextTrimming="None" TextWrapping="Wrap">
           Runs your precious bootyshake project in a new window. To return back to the design window press back button on your phone.
                        </TextBlock>

                        <Image Grid.Column="0" Grid.Row="3"  Source="/BootyShaker;component/Help/Save.png"  Stretch="None"/>
                        <TextBlock  Foreground="White" Grid.Column="1" Grid.Row="3"   HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" TextTrimming="None" TextWrapping="Wrap">
           To save you from trouble desining from scratch next time you want to do some shakin' on the same image, press the save button, once you're sattisfied with your shake project.
                        </TextBlock>
                    </Grid>

                    <TextBlock  Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            When you run your bootyshake project try shaking your phone different directions and see what happens. Also try moving your finger around the screen, or dragging shake objects.
                    </TextBlock>
                    <TextBlock Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            Dont be lazy to experiment, try different shake object sizes and positions, until you're sattisfied with the effect. You might also try the settings menu in the designer. I'll leave it for you to figure out:)
                    </TextBlock>
                    <TextBlock Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            And remember - shake it, but dont break it! I mean the phone.. well, nevermind..
                    </TextBlock>
                    <TextBlock Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            Yours, Vincent
                    </TextBlock>
                    <TextBlock Foreground="White" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Margin="10,10,10,10"  VerticalAlignment="Stretch"  TextWrapping="Wrap">
            P.S. Oh, and if you like the good stuff, dont hesitate to rate it (link in the main menu) or spend a silly buck for the full version. Greetings from Lithuania!
                    </TextBlock>
                </StackPanel>
            </ScrollViewer>
        </Grid>
        <!--<Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#ed8383" Offset="0" />
                <GradientStop Color="#dc9094" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>-->
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</UserControl>
